<template>
	<div style="padding: 0 30rpx;width: 100%;box-sizing: border-box">
		<div class="businessTab">
			<!-- {{jurisdictionList}} -->
			<!-- {{look_auth}} -->
			<div style="padding:0 30rpx;">
				<!-- 	<div class="between info">
					<div v-if="!userInfoFull.id" class="flex" style="font-size: 26rpx;" @click="login">
						<u-avatar v-if="userInfoFull.avatar" @click="personal" class="avatar" :size="48" :src="ImageUrl(userInfoFull.avatar)"></u-avatar>
						{{$t('请先登录')}}
					</div>

					<div v-else class="flex" style="font-size: 26rpx;" @click="personal">
						<u-avatar v-if="userInfoFull.avatar" class="avatar" :size="48" :src="ImageUrl(userInfoFull.avatar)"></u-avatar>
						<text v-if="lang=='zh'">{{userInfoFull.username}}</text>
						<text v-if="lang=='ru'">{{userInfoFull.username_ru}}</text>
						
					</div>

					<div class="flex" style="font-size: 24rpx" v-if="userInfoFull.id" @click="personal">
						{{$t('个人资料')}}
						<image src="/static/right.png" mode="widthFix"
							style="width: 12rpx;margin-left:16rpx;;position: relative;top:2rpx"> </image>
					</div>
				</div> -->

				<div class="app-tab">
					<div class="item" :class="{active:0==current}" @click="current=0;">
						<div class="icon">
							<image style="width:100%;"
								src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20240814/4ecf3df3fc093600b91a32df87d63c1f.png"
								mode="widthFix"></image>
						</div>
						<div class="title" :style="{fontSize:lang=='ru'?'22rpx':'24rpx'}">{{$t('货物')}}</div>
					</div>
					<div class="item" :class="{active:1==current}" @click="current=1;">
						<div class="icon">
							<image style="width:100%;"
								src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20240814/b09a09ead6fd329c41fd5d4f6ee917b7.png"
								mode="widthFix"></image>
						</div>
						<div class="title" :style="{fontSize:lang=='ru'?'22rpx':'24rpx'}">{{$t('运输')}}</div>
					</div>
					<div class="item" :class="{active:2==current}" @click="current=2;">
						<div class="icon">
							<image style="width:100%;"
								src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20240814/0c7e692e11d928459ded66c399efed99.png"
								mode="widthFix"></image>
						</div>
						<div class="title" :style="{fontSize:lang=='ru'?'22rpx':'24rpx'}">{{$t('跨境货代')}}</div>
					</div>
					<div class="item" :class="{active:3==current}" @click="current=3;">
						<div class="icon">
							<image style="width:100%;"
								src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20240814/6a754ad3042f0d6a6cf6c56edc1f6512.png"
								mode="widthFix"></image>
						</div>
						<div class="title" :style="{fontSize:lang=='ru'?'22rpx':'24rpx'}">{{$t('专业代办')}}</div>
					</div>
				</div>
			</div>

			<swiper class="tab-content-1" :class="{'ru-tab-content':lang=='ru'}" :disable-touch="true"
				:current="current" :indicator-dots="false" :vertical="true" :duration="300" :autoplay="false"
				:interval="1500" style="height: 148rpx;">

				<swiper-item>

					<view class="swiper-item">
						<div class="between tab-content">
							<div class="btn-item" @click="handeleRouter('goods1')"
								v-if="(look_auth&&look_auth.indexOf('1')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/goods.png" mode="widthFix" style="width: 35rpx;"></image>
								</div> {{$t('全部货源')}}
								<div class="go"></div>
							</div>
							<div class="btn-item btn-item2" @click="handeleRouter('goods2')"
								v-if="(look_auth&&look_auth.indexOf('9')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/order.png" mode="widthFix" style="width: 45rpx;"></image>
								</div> {{$t(jb)}}
								<div class="go"></div>
							</div>

							<div v-if="look_auth&&look_auth.indexOf('1')==-1&&look_auth.indexOf('9')==-1&&userInfoFull.id"
								class="btn-item btn-item3">
								{{$t('暂无权限访问')}}
							</div>

						</div>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="swiper-item">
						<div class="between tab-content">
							<div class="btn-item" @click="handeleRouter('transport1')"
								v-if="(look_auth&&look_auth.indexOf('2')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/card.png" mode="widthFix" style="width: 35rpx;"></image>
								</div> {{$t('运输服务商')}}
								<div class="go"></div>
							</div>
							<div class="btn-item btn-item2" @click="handeleRouter('transport2')"
								v-if="(look_auth&&look_auth.indexOf('10')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/order.png" mode="widthFix" style="width: 45rpx;"></image>
								</div> {{$t(jb)}}
								<div class="go"></div>
							</div>
							<div v-if="look_auth&&look_auth.indexOf('2')==-1&&look_auth.indexOf('10')==-1&&userInfoFull.id"
								class="btn-item btn-item3">
								{{$t('暂无权限访问')}}
							</div>
						</div>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<div class="between tab-content">
							<div class="btn-item" @click="handeleRouter('crossborder1')"
								v-if="(look_auth&&look_auth.indexOf('3')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/card.png" mode="widthFix" style="width: 35rpx;"></image>
								</div> {{$t('货代服务商')}}
								<div class="go"></div>
							</div>
							<div class="btn-item btn-item2" @click="handeleRouter('crossborder2')"
								v-if="(look_auth&&look_auth.indexOf('11')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/order.png" mode="widthFix" style="width: 45rpx;"></image>
								</div>
								{{$t(jb)}}
								<div class="go"></div>
							</div>
							<div v-if="look_auth&&look_auth.indexOf('3')==-1&&look_auth.indexOf('11')==-1&&userInfoFull.id"
								class="btn-item btn-item3">
								{{$t('暂无权限访问')}}
							</div>
						</div>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<div class="between tab-content">
							<div class="btn-item" @click="handeleRouter('professional1')"
								v-if="(look_auth&&look_auth.indexOf('5')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/card.png" mode="widthFix" style="width: 35rpx;"></image>
								</div> {{$t('代办服务商')}}
								<div class="go"></div>
							</div>
							<div class="btn-item btn-item2" @click="handeleRouter('professional2')"
								v-if="(look_auth&&look_auth.indexOf('13')>-1)||!userInfoFull.id">
								<div class="icon">
									<image src="/static/order.png" mode="widthFix" style="width: 45rpx;"></image>
								</div> {{$t(jb)}}
								<div class="go"></div>
							</div>
							<div v-if="look_auth&&look_auth.indexOf('5')==-1&&look_auth.indexOf('13')==-1&&userInfoFull.id"
								class="btn-item btn-item3">
								{{$t('暂无权限访问')}}
							</div>
						</div>
					</view>
				</swiper-item>

			</swiper>

		</div>

	</div>
</template>

<script>
	import {
		ImageUrl
	} from "@/common/public";
	export default {
		props: ["jurisdictionList", "userInfoFull", "lang", "look_auth"],
		data() {
			return {
				current: 0,
				iconUrl: { //路由地址
					// goods1: "/pages/index/goodsPromotion/goodsPromotion",
					// goods2: "/pages/index/goodsPromotion/goodsPromotion1",
					goods1: "/pages/index/goodsScreening/index",
					goods2: "/pages/index/goodsScreening1/index",
					// transport1: "/pages/index/transportList/transport",
					// transport2: "/pages/index/transportList/transport1",
					transport1: "/pages/index/logistics/index",
					transport2: "/pages/index/logistics/index1",
					crossborder1: "/pages/index/freightForwarder/freightForwarder",
					crossborder2: "/pages/index/freightForwarder/freightForwarder",
					professional1: "/pages/index/agencyList/agencyList",
					professional2: "/pages/index/agencyList/agencyList",
					lifead1: "/pages/index/lifeadvertisingList/lifeadvertisingList",
					lifead2: "/pages/index/lifeadvertisingList/lifeadvertisingList",
					news1: "/pages/index/candrNewsList/candrNewsList",
					news2: "/pages/index/candrNewsList/candrNewsList",
					exposure1: "/pages/index/exposureTableList/exposureTableList",
					exposure2: "/pages/index/exposureTableList/exposureTableList",
					library1: "/pages/user/repository/repository",
					library2: "/pages/user/repository/repository",
				},
				jb: '需求订单'
			}
		},
		methods: {
			// 页面跳转
			ImageUrl,
			handeleRouter(auth) {
				const item = this.jurisdictionList.find(item => item.auth == auth)
				this.log(auth)
				uni.navigateTo({
					url: this.iconUrl[item.auth] + '?type=' + item.type
				})
			},
			login() {
				uni.navigateTo({
					url: "/pages/user/login/login"
				})
			},
			personal() {
				var that = this
				this.$u.api.user.is_user().then(r => {
					if (r) {
						that.$u.route({
							url: 'pages/user/personal/personal'
						})
					} else {
						that.$u.toast(that.$t('请先登录'));
						setTimeout(() => {
							// 此为uView的方法，详见路由相关文档
							that.$u.route('/pages/user/login/login')
						}, 1000)
					}
				})
			},
		},
		mounted() {
			console.log(this.look_auth)
			this.$u.api.user.appCheck().then(res => {
				console.log(res)
				if (res.logOff) {
					this.jb = '竞标订单'
				} else {
					this.jb = '需求订单'
				}
			})
		}
	}
</script>

<style lang="less">
	.tab-content-1 {
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;
		background-color: #fff;

		.btn-item {
			// width: 300rpx;
			flex: 1;
			height: 93rpx;
			display: flex;
			align-items: center;
			margin: 0 7rpx;
			padding: 0 30rpx;
			border-radius: 24rpx;
			font-size: 24rpx;
			color: #fff;
			justify-content: space-between;
			background: linear-gradient(180deg, #069AC3 0%, #6cdefd 100%);
			box-shadow: 0px 4px 15px 0px rgba(6, 154, 195, 0.3);
		}

		.go {
			width: 30rpx;
			height: 30rpx;
		}

		.btn-item2 {
			background: linear-gradient(180deg, #E58B4A 0%, #fdbb8a 100%);
			box-shadow: 0px 4px 15px 0px rgba(229, 139, 74, 0.3);
		}

		.btn-item3 {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			background: linear-gradient(180deg, #0375BF 0%, #8ed3ff 120%);
			box-shadow: 0px 4px 15px 0px rgba(22, 163, 255, 0.3);
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
	}

	.tab-content {
		background-color: #fff;
		width: 100%;
		height: 148rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 20rpx 20rpx;
	}

	.app-tab {
		display: flex;
		justify-content: space-between;
		padding: 0 0rpx;

		.icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #fff;
			margin-bottom: 8rpx;
			flex-shrink: 0;
			overflow: hidden;
		}

		.active {
			background-color: #fff;

			.title {
				color: #3d3d3d;
				font-weight: bold;
			}
		}


		.item {
			width: 140rpx;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			border-radius: 30rpx 30rpx 0 0;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			padding-bottom: 15rpx;
		}
	}

	.avatar {
		width: 48rpx;
		height: 48rpx;
		background-color: #fff;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.info {
		color: #fff;
		margin-bottom: 16rpx;
	}

	.title {
		color: #666;
		font-size: 26rpx;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		word-break: break-all;
	}

	.go {
		background-image: url("/static/right2.png");
		background-size: 100%;
		flex-shrink: 0;
		margin-left: 16rpx;
	}

	.businessTab {
		width: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
		background: linear-gradient(180deg, #0375BF 0%, rgba(122, 153, 182, 0) 67%);
		border-radius: 26rpx;
		margin-top: 25rpx;
		position: relative;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
		overflow: hidden;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ru-tab-content {
		.btn-item {
			font-size: 22rpx !important;
		}
	}
</style>